<template>
  <!-- 包裹器 -->
  <div class="center">
    <!-- 头部 -->
    <div class="header">
      <img class="userImg" src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="Image">
      <div class="headerMain">
        <div v-if="userInfo.nickName !== ''" class="userName">用户：{{userInfo.nickName}}</div>
        <div v-else class="userName">游客</div>
        <div class="text">普通用户</div>
      </div>
    </div>

    <!-- 我的资产 -->
    <div class="myMoney">
      <div class="text">我的资产</div>
      <div class="jine">
        <div class="iten1">
          <div class="money">￥0</div>
          <div class="text1">余额</div>
        </div>
        <div class="iten1">
          <div class="money">0</div>
          <div class="text1">红包</div>
        </div>
        <div class="iten1">
          <div class="money">0</div>
          <div class="text1">优惠卷</div>
        </div>
        <div class="iten1">
          <div class="money">0</div>
          <div class="text1">积分</div>
        </div>
        <div class="iten1">
          <div class="money">0</div>
          <div class="text1">礼品卡</div>
        </div>
      </div>
      <img class="imggg2" src="@/assets/images/image_center/img123.png" alt="">
    </div>

    <!-- 灰色盒子 -->
    <div class="grey"></div>

    <!-- 开卡图片 -->
    <img class="imagesss" src="@/assets/images/image_center/img2.webp" alt="">

    <!-- 宫格 -->
    <van-grid :column-num="3" border>
      <van-grid-item icon="records" text="我的订单" />
      <van-grid-item icon="contact" text="账号管理" />
      <van-grid-item icon="phone-o" text="我的手机号" />
      <van-grid-item icon="calendar-o" text="周六一起拼" />
      <van-grid-item icon="gold-coin-o" text="售后服务" />
      <van-grid-item icon="friends-o" text="邀请返利" />
      <van-grid-item icon="gift-card-o" text="优先购" />
      <van-grid-item icon="discount" text="积分中心" />
      <van-grid-item icon="vip-card-o" text="会员俱乐部" />
      <van-grid-item icon="logistics" text="地址管理" />
      <van-grid-item icon="refund-o" text="支付安全" />
      <van-grid-item icon="smile-o" text="帮助与客服" />
      <van-grid-item icon="envelop-o" text="意见反馈" />
      <van-grid-item icon="after-sale" text="我的竞拍" />
    </van-grid>
    
    <!-- 灰色盒子 -->
    <div class="grey1"></div>

    <!-- 退出登录 -->
    <div class="btn" @click="logout">退出登录</div>

    <!-- 灰色盒子 -->
    <div class="grey2"></div>

    <!-- 白色盒子 -->
    <div class="white"></div>

  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Center'
})
</script>
<script lang="ts" setup>
// 1.引入store
import router from '@/router';
import { centerStore } from '@/stores/center';
import { storeToRefs } from 'pinia';
import { showConfirmDialog } from 'vant';
import { onMounted } from 'vue';
import { toRef } from 'vue';
import { ref } from 'vue';
// 2.拿到整个的store对象
const uesCenterStore = centerStore()
// 3. 拿到用户名称数据
// const userName = ref('')
// userName.value = uesCenterStore.userInfo.nickName/

const {userInfo}  = storeToRefs(uesCenterStore)




const logout = () => {
  showConfirmDialog({
  title: '提示',
  message:
    '是否要退出登录',
})
  .then(() => {
    // on confirm
    // 调用store当中的退出登录逻辑
    uesCenterStore.logout()
    // 跳转到登首页
    router.push('/index')
  })
  .catch(() => {
    // on cancel
  });
}


onMounted:{
  uesCenterStore.getUserInfo()
}
</script>

<style lang="less" scoped>
.center {
  background-color: #fff;
  .header {
    height: 135px;
    background: url('@/assets/images/image_center/bgc.png')no-repeat center;
    background-size:100%;
    background-position: bottom;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .userImg {
      width: 71px;
      height: 71px;
      border-radius: 50%;
    }
    .headerMain {
      padding-left: 20px;
      .userName {
        font-size: 18px;
        color: white;
      }
      .text {
        font-size: 14px;
        color: white;
      }
    }
  }
  .myMoney {
    background-color: #fff;
    margin-left: 20px;
    .text {
      height: 52.8px;
      line-height: 52.8px;
      background-color: #fff;
      font-size: 14px;
      border-bottom: 1px solid gray;
    }
    .jine {
      display: flex;
      justify-content: space-between;
      .iten1 {
        width: 70px;
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: -20px;
        .money {
          font-size: 16px;
        }
        .text1 {
          font-size: 12px;
        }
      }
    }
    .imggg2 {
      display: block;
      width: 355px;
      height: 45px;
      border-radius: 10px;
      margin-left: -10px;
      border: 2px solid #fff6f4;
      margin-bottom: 15px;
    }
  }
  .grey {
    width: 100%;
    height: 10px;
    background-color: #eeeeee;
  }
  .imagesss {
    display: block;
    width: 345px;
    height: 47px;
    margin: 10px 15px;
  }
  .grey1 {
    width: 100%;
    height: 20px;
    background-color: #eeeeee;
  }
  .btn {
    width: 100%;
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
  }
  .grey2 {
    width: 100%;
    height: 10px;
    background-color: #eeeeee;
  }
  .white{
    width: 100%;
    height: 50px;
  }
}
</style>
